<template>
    <div class="stockin-page">
        <el-container>
            <el-header height="auto">
                <el-card shadow="never">
                    <el-form :inline="true" :model="formInline" label-width="auto" class="filter-form">
                        <el-form-item label="进货单号">
                            <el-input v-model="formInline.stockinGoodsNo" clearable placeholder="请输入"
                                style="width: 180px" />
                        </el-form-item>
                        <el-form-item label="单据状态">
                            <el-select
                                v-model="formInline.stockinGoodsStatus"
                                placeholder="请选择"
                                clearable
                                style="width: 160px"
                            >
                                <el-option
                                    v-for="status in STOCKIN_STATUS_OPTIONS"
                                    :key="status.value"
                                    :label="status.label"
                                    :value="status.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="供应商">
                            <el-select v-model="formInline.supplierId" placeholder="请选择" clearable style="width: 220px"
                                filterable>
                                <el-option v-for="item in supplierOptions" :key="item.supplierId"
                                    :label="item.supplierName" :value="item.supplierId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="进货日期">
                            <el-date-picker v-model="formInline.dateRange" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
                                style="width: 260px" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-space>
                                <el-button type="primary" @click="handleQuery">查询</el-button>
                                <el-button @click="handleReset">重置</el-button>
                                <el-button @click="advancedVisible = true">高级搜索</el-button>
                            </el-space>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-header>

            <el-main>
                <el-card shadow="never">
                    <div class="toolbar">
                        <el-space wrap>
                            <el-button type="success" size="small" @click="handleCreate">新增</el-button>
                            <el-button size="small" @click="handleBatchDelete">删除</el-button>
                            <el-button size="small" @click="handleCopy">复制</el-button>
                            <el-button size="small" @click="handleAudit">审核</el-button>
                            <el-button size="small" @click="handleRevoke">撤销</el-button>
                            <el-button size="small" @click="handleExport">导出</el-button>
                            <el-button size="small" @click="handleRefresh">刷新</el-button>
                        </el-space>
                    </div>

                    <el-scrollbar x>
                        <el-table ref="multipleTableRef" v-loading="loading" :data="tableData" border stripe
                            style="width: 100%" @selection-change="handleSelectionChange" empty-text="暂无数据">
                            <el-table-column type="selection" width="55" fixed="left" />
                            <el-table-column type="index" label="序号" width="60" fixed="left" />

                            <el-table-column prop="stockinGoodsNo" label="进货单号" width="160" fixed="left" show-overflow-tooltip>
                                <template #default="{ row }">
                                    <el-link type="primary" @click="goDetail(row)">
                                        {{ row.stockinGoodsNo }}
                                    </el-link>
                                </template>
                            </el-table-column>

                            <el-table-column prop="stockinGoodsStatus" label="单据状态" width="100" fixed="left">
                                <template #default="{ row }">
                                    <el-tag :type="getStatusTagType(row.stockinGoodsStatus)" size="small">
                                        {{ getStatusText(row.stockinGoodsStatus) }}
                                    </el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column prop="stockinGoodsDate" label="进货日期" width="120">
                                <template #default="{ row }">
                                    {{ formatDate(row.stockinGoodsDate) || '-' }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="supplierName" label="供应商" min-width="160" show-overflow-tooltip />
                            <el-table-column prop="stockinContact" label="联系人" width="100" show-overflow-tooltip />
                            <el-table-column prop="stockinContactPhone" label="联系方式" width="130" show-overflow-tooltip />
                            <el-table-column prop="organizationName" label="进货部门" min-width="140" show-overflow-tooltip />
                            <el-table-column prop="stockinUser" label="进货人" width="100" show-overflow-tooltip />

                            <el-table-column prop="stockinGoodsCount" label="货品数量" width="100" align="right">
                                <template #default="{ row }">
                                    {{ row.stockinGoodsCount ?? 0 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="stockinGoodsAmount" label="货品金额" width="120" align="right">
                                <template #default="{ row }">
                                    <span class="amount-text">¥{{ Number(row.stockinGoodsAmount ?? 0).toFixed(2) }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column
                                prop="productName"
                                label="进货货品"
                                min-width="200"
                                show-overflow-tooltip
                            >
                                <template #default="{ row }">
                                    {{ row.productName || '-' }}
                                </template>
                            </el-table-column>

                            <el-table-column prop="stockinUser" label="制单人" width="100" show-overflow-tooltip />
                            <el-table-column prop="stockinDepartment" label="所在部门" min-width="120" show-overflow-tooltip />
                            <el-table-column prop="stockinTime" label="制单时间" width="160">
                                <template #default="{ row }">
                                    {{ row.stockinTime ? formatDateTime(row.stockinTime) : '-' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="createor" label="审核人" width="100" show-overflow-tooltip>
                                <template #default="{ row }">
                                    {{ row.createor || currentLoginUser || '-' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="createrTime" label="审核时间" width="160">
                                <template #default="{ row }">
                                    {{ row.createrTime ? formatDateTime(row.createrTime) : '-' }}
                                </template>
                            </el-table-column>

                            <el-table-column label="操作" fixed="right" width="140" align="center">
                                <template #default="{ row }">
                                    <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                                    <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-scrollbar>
                </el-card>

                <el-card shadow="never" class="pagination-card">
                    <div class="pagination-bar">
                        <div class="pagination-info">
                            共{{ page.listCount }}条， 每页{{ page.pagesize }}条， 当前第{{ page.pageindex }}/{{
                                page.pageCount
                            }}页
                        </div>
                        <div class="pagination-controls">
                            <el-button
                                class="pagination-btn"
                                link
                                type="primary"
                                size="small"
                                @click="page.pageindex = 1"
                            >
                                首页
                            </el-button>
                            <el-pagination
                                v-model:current-page="page.pageindex"
                                v-model:page-size="page.pagesize"
                                :page-sizes="[10, 20, 50, 100]"
                                :total="page.listCount"
                                prev-text="上一页"
                                next-text="下一页"
                                :background="true"
                                layout="prev, pager, next"
                            />
                            <el-button
                                class="pagination-btn"
                                link
                                type="primary"
                                size="small"
                                @click="page.pageindex = page.pageCount || 1"
                            >
                                尾页
                            </el-button>
                            <span class="pagination-jump">
                                前往
                                <el-input-number
                                    v-model="page.pageindex"
                                    :min="1"
                                    :max="page.pageCount || 1"
                                    size="small"
                                    controls-position="right"
                                    style="width: 90px"
                                />
                                页
                            </span>
                        </div>
                    </div>
                </el-card>
            </el-main>
        </el-container>

        <!-- 高级搜索抽屉 -->
        <el-drawer v-model="advancedVisible" title="高级搜索" direction="rtl" size="520px">
            <el-form :model="advancedForm" label-width="90px" class="advanced-form">
                <el-row :gutter="12">
                    <el-col :span="12">
                        <el-form-item label="进货单号">
                            <el-input v-model="advancedForm.stockinGoodsNo" clearable placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="进货金额">
                            <div class="range-input">
                                <el-input-number v-model="advancedForm.minAmount" :min="0" />
                                <span class="range-separator">~</span>
                                <el-input-number v-model="advancedForm.maxAmount" :min="0" />
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="12">
                    <el-col :span="12">
                        <el-form-item label="进货日期">
                            <el-date-picker
                                v-model="advancedForm.dateRange"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="YYYY-MM-DD"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="进货数量">
                            <div class="range-input">
                                <el-input-number v-model="advancedForm.minCount" :min="0" />
                                <span class="range-separator">~</span>
                                <el-input-number v-model="advancedForm.maxCount" :min="0" />
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="16">
                    <el-col :span="24">
                        <el-form-item label="单据状态">
                            <el-checkbox-group v-model="advancedForm.statusList">
                                <el-checkbox
                                    v-for="status in STOCKIN_STATUS_OPTIONS"
                                    :key="`adv-${status.value}`"
                                    :label="status.value"
                                >
                                    {{ status.label }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="16">
                    <el-col :span="12">
                        <el-form-item label="供应商">
                            <el-select v-model="advancedForm.supplierId" placeholder="请选择" clearable
                                style="width: 100%" filterable>
                                <el-option v-for="item in supplierOptions" :key="item.supplierId"
                                    :label="item.supplierName" :value="item.supplierId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人">
                            <el-input v-model="advancedForm.stockinContact" clearable placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="16">
                    <el-col :span="12">
                        <el-form-item label="进货部门">
                            <el-input v-model="advancedForm.stockinDepartment" clearable placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="进货人">
                            <el-input v-model="advancedForm.stockinUser" clearable placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="16">
                    <el-col :span="12">
                        <el-form-item label="制单人">
                            <el-input v-model="advancedForm.maker" clearable placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="制单时间">
                            <el-date-picker
                                v-model="advancedForm.makerTimeRange"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="YYYY-MM-DD"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="16">
                    <el-col :span="12">
                        <el-form-item label="审核人">
                            <el-input v-model="advancedForm.reviewer" clearable placeholder="请输入" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="审核时间">
                            <el-date-picker
                                v-model="advancedForm.reviewTimeRange"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="YYYY-MM-DD"
                                clearable
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <div style="text-align:right">
                    <el-button @click="handleAdvancedReset">重置</el-button>
                    <el-button @click="advancedVisible = false">关闭</el-button>
                    <el-button type="primary" @click="handleAdvancedSearch">查询</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type TableInstance } from 'element-plus'
import moment from 'moment'
import router from '@/router'
import myaxios from '@/http/MyAxios'

interface StockinGoodsItem {
    stockinGoodsId: number
    stockinGoodsNo: string
    stockinGoodsStatus: number
    stockinGoodsDate: string
    supplierId: number
    supplierName: string
    stockinContact: string
    stockinContactPhone: string
    organizationId: number
    organizationName: string
    userId: number
    userName: string
    productid: number
    productName: string
    stockinGoodsCount: number
    stockinGoodsAmount: number
    stockinUser: string
    stockinDepartment: string
    stockinTime: string
    createor?: string
    createrTime?: string
}

const STOCKIN_STATUS_OPTIONS = [
    { value: 0, label: '草稿', tagType: 'info' },
    { value: 1, label: '待审核', tagType: 'warning' },
    { value: 2, label: '驳回', tagType: 'danger' },
    { value: 3, label: '未入库', tagType: 'info' },
    { value: 4, label: '部分入库', tagType: 'warning' },
    { value: 5, label: '已完成', tagType: 'success' },
    { value: 6, label: '已关闭', tagType: 'danger' },
]

const loading = ref(false)
const tableData = ref<StockinGoodsItem[]>([])
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<StockinGoodsItem[]>([])

const advancedVisible = ref(false)

const formInline = reactive({
    stockinGoodsNo: '',
    stockinGoodsStatus: '',
    supplierId: '',
    dateRange: [] as string[],
})

const advancedForm = reactive({
    stockinGoodsNo: '',
    stockinGoodsStatus: '',
    statusList: [] as number[],
    supplierId: '',
    dateRange: [] as string[],
    minAmount: undefined as number | undefined,
    maxAmount: undefined as number | undefined,
    minCount: undefined as number | undefined,
    maxCount: undefined as number | undefined,
    stockinContact: '',
    stockinDepartment: '',
    stockinUser: '',
    maker: '',
    makerTimeRange: [] as string[],
    reviewer: '',
    reviewTimeRange: [] as string[],
})

const page = reactive({
    pageindex: 1,
    pagesize: 10,
    listCount: 0,
    pageCount: 0,
})

const supplierOptions = ref<any[]>([])

// 当前登录用户信息
const currentLoginUser = ref<string>('')

// 获取当前登录用户信息
const loadCurrentUser = async () => {
    try {
        const res = await myaxios.get('/api/User/GetMyProfile')
        const droot: any = res?.data ?? {}
        const d: any = (droot?.data && Object.keys(droot).length <= 3) ? (droot.data || {}) : droot
        if (d) {
            // 优先使用真实姓名，其次用户名，最后账号
            currentLoginUser.value = d.userName || d.realName || d.nickname || localStorage.getItem('username') || ''
            // 如果获取到了，更新localStorage
            if (currentLoginUser.value) {
                localStorage.setItem('username', currentLoginUser.value)
            }
        } else {
            // 如果接口失败，使用localStorage中的值
            currentLoginUser.value = localStorage.getItem('username') || ''
        }
    } catch (error) {
        // 如果接口失败，使用localStorage中的值
        console.warn('获取当前用户信息失败，使用本地存储的值:', error)
        currentLoginUser.value = localStorage.getItem('username') || ''
    }
}

const fetchData = () => {
    loading.value = true
    myaxios
        .get('/api/StockinGoods/GetStockinGoods', {
            params: {
                stockinGoodsNo: advancedForm.stockinGoodsNo || formInline.stockinGoodsNo,
                stockinGoodsStatus:
                    advancedForm.statusList.length
                        ? advancedForm.statusList.join(',')
                        : (advancedForm.stockinGoodsStatus || formInline.stockinGoodsStatus),
                supplierId: advancedForm.supplierId || formInline.supplierId,
                beginDate: advancedForm.dateRange?.[0] || formInline.dateRange?.[0] || '',
                endDate: advancedForm.dateRange?.[1] || formInline.dateRange?.[1] || '',
                minAmount: advancedForm.minAmount,
                maxAmount: advancedForm.maxAmount,
                minCount: advancedForm.minCount,
                maxCount: advancedForm.maxCount,
                stockinContact: advancedForm.stockinContact,
                stockinDepartment: advancedForm.stockinDepartment,
                stockinUser: advancedForm.stockinUser,
                maker: advancedForm.maker,
                beginMakerTime: advancedForm.makerTimeRange?.[0] || '',
                endMakerTime: advancedForm.makerTimeRange?.[1] || '',
                reviewer: advancedForm.reviewer,
                beginReviewTime: advancedForm.reviewTimeRange?.[0] || '',
                endReviewTime: advancedForm.reviewTimeRange?.[1] || '',
                pageindex: page.pageindex,
                pagesize: page.pagesize,
            },
        })
        .then((res) => {
            const result = res.data || {}
            if (result.code === 200) {
                tableData.value = (result.data?.data ?? []) as StockinGoodsItem[]
                page.listCount = result.data?.listCount ?? 0
                page.pageCount = result.data?.pageCount ?? 0
            }
        })
        .catch((err) => {
            console.error('获取进货列表失败:', err)
        })
        .finally(() => {
            loading.value = false
        })
}

const loadSuppliers = async () => {
    try {
        const res = await myaxios.get('/api/StockinGoods/GetSuppliersForStockin')
        if (res.data.code === 200 || res.data.success) {
            supplierOptions.value = res.data.data || []
        }
    } catch (error) {
        console.error('获取供应商列表失败:', error)
    }
}

onMounted(() => {
    loadCurrentUser() // 加载当前登录用户信息
    fetchData()
    loadSuppliers()
})

watch(
    () => [page.pageindex, page.pagesize],
    () => {
        fetchData()
    },
)

const handleQuery = () => {
    page.pageindex = 1
    fetchData()
}

const handleAdvancedReset = () => {
    advancedForm.stockinGoodsNo = ''
    advancedForm.stockinGoodsStatus = ''
    advancedForm.statusList = []
    advancedForm.supplierId = ''
    advancedForm.dateRange = []
    advancedForm.minAmount = undefined
    advancedForm.maxAmount = undefined
    advancedForm.minCount = undefined
    advancedForm.maxCount = undefined
    advancedForm.stockinContact = ''
    advancedForm.stockinDepartment = ''
    advancedForm.stockinUser = ''
    advancedForm.maker = ''
    advancedForm.makerTimeRange = []
    advancedForm.reviewer = ''
    advancedForm.reviewTimeRange = []
}

const handleAdvancedSearch = () => {
    page.pageindex = 1
    advancedVisible.value = false
    fetchData()
}

const handleReset = () => {
    formInline.stockinGoodsNo = ''
    formInline.stockinGoodsStatus = ''
    formInline.supplierId = ''
    formInline.dateRange = []
    page.pageindex = 1
    fetchData()
}

const handleSelectionChange = (val: StockinGoodsItem[]) => {
    multipleSelection.value = val
}

const handleCreate = () => {
    router.push('/CreateStockingGoods')
}

const STOCKIN_DETAIL_CACHE_KEY = 'STOCKIN_DETAIL_CACHE'

const goDetail = (row: StockinGoodsItem) => {
    // 缓存数据，实现立即显示
    sessionStorage.setItem(STOCKIN_DETAIL_CACHE_KEY, JSON.stringify(row))
    router.push({
        path: '/DetailStockingGoods',
        query: { stockinGoodsId: row.stockinGoodsId },
    })
}

const STOCKIN_EDIT_CACHE_KEY = 'STOCKIN_EDIT_CACHE'

const handleEdit = (row: StockinGoodsItem) => {
    sessionStorage.setItem(STOCKIN_EDIT_CACHE_KEY, JSON.stringify(row))
    router.push({
        path: '/UpdateStockingGoods',
        query: { stockinGoodsId: row.stockinGoodsId },
    })
}

const handleDelete = (row: StockinGoodsItem) => {
    ElMessageBox.confirm('确认删除该进货单吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            try {
                const res = await myaxios.delete('/api/StockinGoods/DeleteStockinGoods', {
                    params: { stockinGoodsId: row.stockinGoodsId },
                })
                const result = res.data || {}
                if (result.code === 200) {
                    ElMessage.success(result.message || '删除成功')
                    fetchData()
                } else {
                    ElMessage.error(result.message || '删除失败')
                }
            } catch (error) {
                console.error('删除进货单失败:', error)
                ElMessage.error('删除失败，请稍后重试')
            }
        })
        .catch(() => { })
}

const handleBatchDelete = () => {
    if (!multipleSelection.value.length) {
        ElMessage.warning('请选择需要删除的进货单')
        return
    }

    ElMessageBox.confirm(
        `确认删除选中的${multipleSelection.value.length}条进货单吗？`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        },
    )
        .then(async () => {
            try {
                const ids = multipleSelection.value.map((item) => item.stockinGoodsId).join(',')
                const res = await myaxios.delete('/api/StockinGoods/BatchDeleteStockinGoods', {
                    params: { stockinGoodsIds: ids },
                })
                const result = res.data || {}
                if (result.code === 200) {
                    ElMessage.success(result.message || '批量删除成功')
                    fetchData()
                } else {
                    ElMessage.error(result.message || '批量删除失败')
                }
            } catch (error) {
                console.error('批量删除进货单失败:', error)
                ElMessage.error('批量删除失败，请稍后重试')
            }
        })
        .catch(() => { })
}

const handleRefresh = () => {
    fetchData()
}

const handleCopy = () => {
    ElMessage.warning('复制功能暂未实现')
}

const handleAudit = () => {
    ElMessage.warning('审核功能暂未实现')
}

const handleRevoke = () => {
    ElMessage.warning('撤销功能暂未实现')
}

const handleClose = () => {
    ElMessage.warning('关闭功能暂未实现')
}

const handleOpen = () => {
    ElMessage.warning('开启功能暂未实现')
}

const handleExport = () => {
    ElMessage.warning('导出功能暂未实现')
}

const getStatusOption = (status: number) =>
    STOCKIN_STATUS_OPTIONS.find((item) => Number(item.value) === Number(status))

const getStatusText = (status: number) => {
    return getStatusOption(status)?.label ?? '未知'
}

const getStatusTagType = (status: number) => {
    return getStatusOption(status)?.tagType ?? 'info'
}

const formatDate = (date?: string) => {
    if (!date) return ''
    return moment(date).format('YYYY-MM-DD')
}

const formatDateTime = (date?: string) => {
    if (!date) return ''
    return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style scoped>
.stockin-page {
    padding: 12px;
}

.toolbar {
    margin-bottom: 16px;
}

.pagination-card {
    margin-top: 16px;
}

.pagination-table {
    width: 100%;
}

.pagination-table td {
    padding: 0 12px;
    vertical-align: middle;
}

.pagination-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.pagination-info {
    font-size: 12px;
    color: #666;
}

.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pagination-jump {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #666;
}

.pagination-btn :deep(span) {
    padding: 0 10px;
}

.pagination-btn {
    border-radius: 4px;
}

.range-input {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.range-input :deep(.el-input-number) {
    flex: 1;
}

.range-separator {
    font-size: 12px;
    color: #666;
}

.advanced-form {
    padding-right: 8px;
}

.advanced-form :deep(.el-form-item) {
    margin-bottom: 8px;
}

.advanced-form :deep(.el-input),
.advanced-form :deep(.el-select),
.advanced-form :deep(.el-date-editor),
.advanced-form :deep(.el-input-number) {
    width: 100%;
}

.goods-column :deep(.cell) {
    white-space: normal !important;
    word-break: break-word;
    line-height: 20px;
}

.goods-multi-text {
    white-space: normal;
    word-break: break-word;
}

/* 表格优化样式 */
:deep(.el-table) {
    font-size: 13px;
}

:deep(.el-table th) {
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 600;
    padding: 12px 0;
}

:deep(.el-table td) {
    padding: 12px 0;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
    background-color: #fafafa;
}

:deep(.el-table .el-table__row:hover > td) {
    background-color: #f5f7fa !important;
}

/* 金额文本样式 */
.amount-text {
    font-weight: 500;
    color: #f56c6c;
    font-family: 'Courier New', monospace;
}

/* 链接样式优化 */
:deep(.el-link) {
    font-weight: 500;
}

/* 标签样式优化 */
:deep(.el-tag) {
    border-radius: 4px;
    font-weight: 500;
}

/* 表格边框优化 */
:deep(.el-table--border) {
    border: 1px solid #ebeef5;
}

:deep(.el-table--border th),
:deep(.el-table--border td) {
    border-right: 1px solid #ebeef5;
}

/* 固定列阴影 */
:deep(.el-table__fixed),
:deep(.el-table__fixed-right) {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}

/* 表格卡片样式 */
.el-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 优化表格滚动条 */
:deep(.el-table__body-wrapper) {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
    width: 8px;
    height: 8px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
    background: #f1f1f1;
    border-radius: 4px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
    background: #c1c1c1;
    border-radius: 4px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
    background: #a8a8a8;
}

/* 操作按钮样式 */
:deep(.el-table .el-button--link) {
    padding: 4px 8px;
    margin: 0 4px;
    font-weight: 500;
}

:deep(.el-table .el-button--link:hover) {
    text-decoration: underline;
}

/* 工具栏按钮样式优化 */
.toolbar :deep(.el-button) {
    border-radius: 4px;
}

/* 筛选表单样式优化 */
.filter-form {
    margin-bottom: 0;
}

.filter-form :deep(.el-form-item) {
    margin-bottom: 16px;
}

/* 高级搜索表单样式 */
.advanced-form :deep(.el-checkbox-group) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.advanced-form :deep(.el-checkbox) {
    margin-right: 0;
}
</style>
